<script setup lang="ts">
import {ref} from 'vue'
const tableDialogVisible = ref(false)
</script>
<template>
    <div class="record_info">
        <div class="table_info">
            <table>
                <colgroup>
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                </colgroup>
                <tr>
                    <th>煤场名称</th>
                    <td>1#煤场</td>
                    <td></td>
                    <th>登记人</th>
                    <td>王小丫</td>
                </tr>
                <tr>
                    <th>盘煤时间</th>
                    <td>2023-09-09  10:00:01</td>
                    <td></td>
                    <th>密度</th>
                    <td>1</td>
                </tr>
                <tr>
                    <th>盘煤重量</th>
                    <td>127157吨</td>
                    <td></td>
                    <th>盘煤体积</th>
                    <td>125488</td>
                </tr>
                <tr>
                    <th>与上次盘煤重量差</th>
                    <td><p class="green">+378吨</p></td>
                    <td></td>
                    <th>与前一次盘煤体积差</th>
                    <td>+213</td>
                </tr>
                <tr>
                    <th>存煤报表</th>
                    <td>
                        <a href="#" class="table_link">2023-09-09  10:00:01</a>
                        <a href="#" style="margin-left: 20px;font-weight: bold;color: #2565C8;">下载</a>
                    </td>
                    <td></td>
                    <th>存煤图片</th>
                    <td>
                        <img src="../../assets/img/ph_3d.jpg" width="140" alt="">
                    </td>
                </tr>
            </table>
            <h3>存煤明细</h3>
            <table>
                <colgroup>
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                </colgroup>
                <tr>
                    <th>分区名称</th>
                    <th>一次编码</th>
                    <th>所属煤种</th>
                    <th>堆体重量</th>
                    <th>堆体体积</th>
                </tr>
                <tr>
                    <td rowspan="3">0°-60°</td>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td rowspan="2">60°-120°</td>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td>120°-180°</td>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td>180°-240°</td>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr>
                    <td>240°-300°</td>
                    <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                    <td>褐煤</td>
                    <td>13092</td>
                    <td>13092</td>
                </tr>
                <tr class="table_bg">
                    <td colspan="3">合计</td>
                    <td>127157</td>
                    <td>127157</td>
                </tr>
            </table>
            <h3>备注</h3>
            <div class="beiz">
                <p>1、于2020-09-09  10:00:09产生盘煤记录</p>
                <p>2、王小丫在2020-09-10  12:33:09产生盘煤记录</p>
            </div>

        </div>
        <div class="record_info_btn">
            <el-button color="#2565C8">导出</el-button>
            <el-button color="#2565C8" @click="tableDialogVisible = true">修改</el-button>
            <el-button color="#2565C8">关闭</el-button>
        </div>
    </div>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_6.png" alt="">
            <strong>警告</strong>
            <span>
                盘煤体积与各明细体积之和不一致！
            </span>
        </div>
    </el-dialog>

</template>
<style scoped lang="scss">



</style>